﻿@model WalkingTec.Mvvm.Core.BaseVM
@using Newtonsoft.Json;

<div class="layui-row layui-col-space15" id="frontpage">
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">总收入（套餐+标准服务）</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                            <div carousel-item>
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs12">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>本月总收入</h3>
                                            <p><cite>@ViewBag.allsrm</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs12">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>年度总收入</h3>
                                            <p><cite>@ViewBag.allsr</cite></p>
                                        </a>
                                    </li>
                                </ul>


                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">销售情况</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-backlog">
                            <div carousel-item>
                                <ul class="layui-row layui-col-space10">
                                    <li class="layui-col-xs6">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>本月售卡收入</h3>
                                            <p><cite>@ViewBag.tcsrm</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>本月标服收入</h3>
                                            <p><cite>@ViewBag.bzsrm</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>年度售卡收入</h3>
                                            <p><cite>@ViewBag.tcsr</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a href="#" class="layadmin-backlog-body">
                                            <h3>年度标服收入</h3>
                                            <p><cite>@ViewBag.bzsr</cite></p>
                                        </a>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">本月套卡服务分析</div>
                    <div class="layui-carousel layadmin-carousel layadmin-dataview">
                        <div carousel-item>
                            <div id="chart_Controller" style=" height:300px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">本月标准服务分析</div>
                    <div class="layui-carousel layadmin-carousel layadmin-dataview">
                        <div carousel-item>
                            <div id="chart_Other" style=" height:300px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">全年收入数据分析</div>
                    <div class="layui-card-body">

                        <div id="chart_Qn" style=" height:300px;">

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>



</div>
<script>





  //区块轮播切换
  layui.use(['admin', 'carousel'], function () {
    var $ = layui.$
      , admin = layui.admin
      , carousel = layui.carousel
      , element = layui.element
      , device = layui.device();

    //轮播切换
    $('.layadmin-carousel').each(function () {
      var othis = $(this);
      carousel.render({
        elem: this
        , width: '100%'
        , arrow: 'none'
        , interval: othis.data('interval')
        , autoplay: othis.data('autoplay') === true
        , trigger: (device.ios || device.android) ? 'click' : 'hover'
        , anim: othis.data('anim')
      });
    });
    element.render('progress');
  });



  //数据概览
  layui.use(['admin', 'carousel', 'echarts'], function () {
    var $ = layui.$
      , admin = layui.admin
      , carousel = layui.carousel
      , echarts = layui.echarts;

      var control = echarts.init(document.getElementById('chart_Controller'), 'default');
      var controlOption = {
        tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: @Html.Raw(JsonConvert.SerializeObject(ViewData["skfxle"]))
    },
          toolbox: {
              show: true,
              feature: {
                  dataView: { show: true, readOnly: false },
                  saveAsImage: { show: true }
              }
          },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: @Html.Raw(JsonConvert.SerializeObject(ViewData["skfx"]))
        }
    ]
      };
      control.setOption(controlOption);
      var other = echarts.init(document.getElementById('chart_Other'), 'default');
      var otherOption = {
        tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: @Html.Raw(JsonConvert.SerializeObject(ViewData["bzfxle"]))
    },
          toolbox: {
              show: true,
              feature: {
                  dataView: { show: true, readOnly: false },
                  saveAsImage: { show: true }
              }
          },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: @Html.Raw(JsonConvert.SerializeObject(ViewData["bzfx"])),
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
      };
      other.setOption(otherOption);
      var chartQn = echarts.init(document.getElementById('chart_Qn'), 'default');
      var qnOption = {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['套卡销售收入', '标准服务收入']
          },
          toolbox: {
              show: true,
              feature: {
                  dataZoom: {
                      yAxisIndex: 'none'
                  },
                  dataView: { readOnly: false },
                  magicType: { type: ['line', 'bar'] },
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: @Html.Raw(JsonConvert.SerializeObject(ViewData["yflist"]))
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  formatter: '{value} °C'
              }
          },
          series: [
              {
                  name: '套卡销售收入',
                  type: 'line',
                  data: @Html.Raw(JsonConvert.SerializeObject(ViewData["tcdlist"])),
                  markPoint: {
                      data: [
                          { type: 'max', name: '最大值' },
                          { type: 'min', name: '最小值' }
                      ]
                  },
                  markLine: {
                      data: [
                          { type: 'average', name: '平均值' }
                      ]
                  }
              },
              {
                  name: '标准服务收入',
                  type: 'line',
                  data: @Html.Raw(JsonConvert.SerializeObject(ViewData["bzdlist"])),
                  markPoint: {
                      data: [
                          { type: 'max', name: '最大值' },
                          { type: 'min', name: '最小值' }
                      ]
                  },
                  markLine: {
                      data: [
                          { type: 'average', name: '平均值' },
                          [{
                              symbol: 'none',
                              x: '90%',
                              yAxis: 'max'
                          }, {
                              symbol: 'circle',
                              label: {
                                  position: 'start',
                                  formatter: '最大值'
                              },
                              type: 'max',
                              name: '最高点'
                          }]
                      ]
                  }
              }
          ]
      };

      chartQn.setOption(qnOption);



    //没找到DOM，终止执行
    if (!elemDataView[0]) return;

    renderDataView(0);

    //监听数据概览轮播
    var carouselIndex = 0;
    carousel.on('change(LAY-index-dataview)', function (obj) {
      renderDataView(carouselIndex = obj.index);
    });

    //监听侧边伸缩
    layui.admin.on('side', function () {
      setTimeout(function () {
        renderDataView(carouselIndex);
      }, 300);
    });

    //监听路由
    layui.admin.on('hash(tab)', function () {
      layui.router().path.join('') || renderDataView(carouselIndex);
    });
  });

</script>
